<!DOCTYPE html>
<html lang="en" xmlns:m="http://www.w3.org/1998/Math/MathML">
    <head>
        <!-- Meta information -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <meta charset="utf-8"></meta>
        <meta name="description" content=""></meta>
        <meta name="author" content=""></meta>

        <title>Kinomics</title>

        <!-- style sheets -->
        <link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
        <link href="../js/qualityControl/UIsupport/nouislider.css" rel="stylesheet"></link>
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia"></link>
        <link rel="stylesheet" href="../js/qualityControl/UIsupport/jqmath-0.2.0.css"></link>

        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>

        <!-- jQuery load this at top since everything depends on it-->
        

        <!-- TODO: update these icons -->
        <link rel="shortcut icon" href="./favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png"></link>
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png"></link>
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png"></link>
        <link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png"></link>
    </head>
    <body class=" hasGoogleVoiceExt">
        <!-- Navigation bar at the top of the screen -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding... -->    <a class="brand">Kinomics Toolbox</a>

                    <!-- navigate between tabs -->
                    <div class="nav-collapse in collapse" style="height: auto; ">
                        <ul class="nav">
                            <li class="active"><a href="#home" data-toogle="tab" id="tag1">Home</a></li>
                            <li><a href="#qualtityControl" data-toogle="tab" id="tag2">Data Visualization</a></li>
                            <!-- TODO: change to more logical view Login tablet/phone-->
                            <li class="hidden-desktop">
                                <nav class='btn-group'>
                                    <!-- Title -->    
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                        <i class="icon-user"></i> <span class="username">Login</span>
                                        <span class="caret"></span>
                                    </a>
<!-- TODO: fix this stuff for the iphone login... -->
                                    <!-- Options -->
                                    <!-- <ul id="user-access-options" class="dropdown-menu">
                                        <li id='auth'><a href="javascript:fuse.authenticate(function(){});">Authenticate with Google Account</a>

                                        </li>
                                        <li class="divider"></li>
                                        <li><a href="javascript:s3dbfu.showmodal('loginUN');void(0);">S3DB with User Name</a>

                                        </li>
                                        <li><a href="javascript:s3dbfu.showmodal('loginAK');void(0);">S3DB with API Key</a>

                                        </li>
                                    </ul> -->
                                </nav>
                            </li>
                            <!-- TODO: change to more logical view Choose Database Phone/Tablet-->
                            <!-- <li class="hidden-desktop">
                                <nav id="tableSwitch" class="btn-group"> -->
                                    <!-- Title -->
                                    <!-- <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                        <span class="curData"></span>
                                        <span class="caret"></span>
                                    </button> -->
                                    <!-- Options Phone/Tablet-->
                                <!--     <ul class="dropdown-menu dbSelector">
                                    </ul>
                                </nav>
                            </li> -->

                        </ul>
                        <!-- Login desktop-->
                        <nav class='btn-group pull-right visible-desktop'>
                            <!-- Title -->    
                            <!-- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="icon-user"></i> <span class="username">Login</span>
                                <span class="caret"></span>
                            </a> -->

                            <!-- Options -->
                            <!-- <ul id="user-access-options" class="dropdown-menu">
                                <li id='authFT'><a>Authenticate with Google Account</a>

                                </li>
                                <li class="divider"></li>
                                <li><a href="javascript:s3dbfu.showmodal('loginUN');void(0);">S3DB with User Name</a>

                                </li>
                                <li><a href="javascript:s3dbfu.showmodal('loginAK');void(0);">S3DB with API Key</a>

                                </li>
                            </ul> -->
                        </nav>
                        <!-- Choose Database desktop-->
                        <!-- <nav id="tableSwitch" class="btn-group pull-right visible-desktop">
                            
                            <button class="btn dropdown-toggle pull-right" data-toggle="dropdown" href="#">
                                <span class="curData"></span>
                                <span class="caret"></span>
                            </button>
                            
                            <ul class="dropdown-menu dbSelector">
                            </ul>
                        </nav> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Location of all the tabs in the document -->
        <div class="row"><div class="offset1 span10"><div id="errors"></div></div></div>
        <div id="main" class="container tab-content">
            <!-- Home Tab -->
            <div id="home" class="tab-pane active hero-unit">
                <h1>Kinomic Data Analysis and Management</h1><br />
                <p>University of Alabama at Birmingham
                    <br>Division of Informatics
                    <br>Department of Radiation Oncology
                    <br>Department of Pathology
                    <br><a href="http://ibl.github.io" target="_blank">Integrative Bioinformatics Laboratory</a>
                    <br /><br /> Source code avaliable at: <a href="https://github.com/kinome/kinome.github.io" target="_blank">github.com</a>
                </p>
            </div>

            <!-- Quality control tab -->
            <div class="tab-pane container" id="qualtityControl">
                <h1>Data Visualization</h1>
                <!-- TODO: dynamically generate this -->
                <well class="well span11" id='tempQCMessage'>Please select at least one file to add to analysis.</well>
                <well class="well span11" id='dataVis'></well>
            </div>

        <!-- Javascript placed at the end of the document so the pages load faster
        -->
        <div id="javascripts">
            <!-- Major Packages -->
            <script src="../js/general/jquery-1.7.2.min.js"></script>
            <script src="../js/bootstrap/js/bootstrap.min.js"></script>

            <!-- Support Packages -->
            <script src="../js/qualityControl/UIsupport/jquery.nouislider.js"></script>
            <script src="../js/qualityControl/UIsupport/jqmath-etc-0.2.0.min.js"></script>
            <script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>
            <script type="text/javascript" src="../js/general/jsapi.js"></script>

            <!-- My Packages -->
            <script src="../js/general/nameSpace.js"></script>
            <script src="../js/general/barcodeProto.js"></script>
            <script src="../js/general/workersPackage.js"></script>
            <script src="../js/general/amdjs_1.1.0.js" type="text/javascript"></script>
            <script src="./publicqcDA.js"></script>
            <!-- // <script src="../js/qualityControl/qcDA.js"></script> -->
            <script src="../js/fileManagement/fmDA.js"></script>
            <!-- <script src="./fileManagement/fmDA_FT.js"></script> -->
<!--            <script src="../js/fileManagement/fmDA_s3db.js"></script> -->
            <!-- <script src="./fileManagement/fusionTables.js"></script> -->
<!--         <script src="js/fileManagement/fileUploadManager.js"></script> -->

            <!-- UI -->
            <script src="../js/qualityControl/qcUI.js"></script>
            <!-- <script src="./fileManagement/fmUI.js"></script> -->

            <script src="./sampleData.js"></script>
            
            <!-- <script src="js/general/client.js" gapi_processed="true"></script> -->


            <!-- S3DB/filemanagement form -->
        <!--    <script src="js/fileManagement/s3dbInferface.js"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.ui.widget.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/tmpl.min.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/load-image.min.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.iframe-transport.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.fileupload.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.fileupload-fp.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.fileupload-ui.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/locale.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/f893461cf3f9e55fa2c12a5536abc17cb7ab962b/s3dbfu.js"
            type="text/javascript"></script>
            -->
            <!-- Makes the input botton invisible -->
            <style type="text/css">
                .inputBut {
                    overflow:hidden;
                    position:relative;
                    cursor: pointer;
                    _cursor: pointer;
                }
                .hiddenBut {
                    z-index: 999;
                    line-height: 0;
                    font-size: 5px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    height:100%;
                    width:100%;
                    opacity: 0;
                    filter: alpha(opacity=0);
                    -ms-filter:"alpha(opacity=0)";
                    cursor: pointer;
                    _cursor: pointer;
                    margin: -200;
                    padding:-200;
                }
            </style>

            <script src="../js/general/wasInline.js"></script>

        </div>
    </body>

</html>
